
<template>  
    <!--  ----------------------表单-----------------------------------------
    当用户填写表单并提交时，会触发 submitForm 方法，
    该方法收集表单数据并打印出来
    @submit.prevent：
    @submit 是 Vue 的事件监听器语法，用于监听表单的提交事件。
    .prevent 是修饰符，用于阻止默认行为。在这种情况下，它防止了表单提交时页面刷新的默认行为。 -->
    <form @submit.prevent = "submitForm">
       <div class="form-control" :class="{invalid: !firstName.isValid}">
            <!-- 属性 for 与输入框的 id 相关联，这样当用户点击标签时，
            浏览器会自动聚焦到相应的输入框。
            在这里，for 的值是 "firstname"，表示这个标签与 id 为
            "firstname" 的输入框相关联。 -->
            <label for="firstname">Firstname</label>
            <!-- type 属性设置为 "text"，表示这是一个文本类型的输入框。
            id 属性设置为 "firstname"，用于标识这个输入框，并且与前面提到的
            label 标签关联。 -->
            <input type = "text" id="firstname" v-model="firstName.val" @blur="clearValidity('firstName')"/>
            <p v-if="!firstName.isValid">Firstname must not be empty!</p>
       </div> 

       <div class="form-control" :class="{invalid: !lastName.isValid}">
            <label for="lastname">lastname</label>
            <input type = "text" id="lastname" v-model.trim="lastName.val" @blur="clearValidity('lastName')"/>
            <p v-if="!lastName.isValid">Lastname must not be empty!</p>
       </div> 

       <div class="form-control" :class="{invalid: !description.isValid}">
            <label for="description">Description</label>
            <textarea id = "description" rows = "5" v-model.trim = "description.val" @blur="clearValidity('description')"></textarea>
            <p v-if="!description.isValid">Description must not be empty!</p>
       </div> 

       <div class="form-control" :class="{invalid: !rate.isValid}">
            <label for="rate">Hourly Rate</label>
            <input type = "number" id="rate" v-model.number = "rate.val" @blur="clearValidity('rate')"/>
            <p v-if="!rate.isValid">Rate must be greater than 0!</p>
       </div> 
       
       <!--------------------- checkbox --------------------------->
       <div class="form-control" :class="{invalid: !areas.isValid}">
            <h3>Areas of expertise</h3>
            <div>
                <input type = "checkbox" id = "frontend" 
                value = "frontend" v-model = "areas.val" @blur="clearValidity('areas')">
                <label for="frontend">Frontend Development</label>
            </div>
            <div>
                <input type = "checkbox" id = "backend" 
                value = "backend" v-model = "areas.val" @blur="clearValidity('areas')">
                <label for="backend">Backend Development</label>
            </div>
            <div>
                <!-- value="career"：定义了复选框的值。当复选框被选中时，
                这个值会被发送到服务器（如果使用了表单提交）或者存储在 Vue 组件
                的属性中（如果使用了 v-model）。 -->
                <input type = "checkbox" id = "career" 
                value = "career" v-model = "areas.val" @blur="clearValidity('areas')">
                <label for="career">career advisory</label>
            </div>
            <p v-if="!areas.isValid">At least one expertise must be selected!</p>
       </div> 
       <p v-if = "!formIsValid">Please fix the above errors and submit again!</p>
       <base-button>Register</base-button>
    </form>   
</template>

<script>
export default {
    emits: ['save-data'],
   data()
   {
     return{
        firstName:{
            val: '',
            isValid:true,
        },
        lastName:{
            val: '',
            isValid:true,
        },
        description:{
            val:'',
            isValid:true,
        },
        rate:{
            val:null,
            isValid:true,
        },
        areas:{
            val:'',
            isValid:true,
        },
        formIsValid:true
     };
   },
   methods:{
    clearValidity(input)
    {
        this[input].isValid =true;
    },
     validateForm(){
        this.formIsValid = true;
        if(this.firstName.val === ''){
            this.firstName.isValid = false;
            this.formIsValid = false;
        }
        if(this.lastName.val === ''){
            this.lastName.isValid = false;
            this.formIsValid = false;
        }
        if(this.description.val === ''){
            this.description.isValid = false;
            this.formIsValid = false;
        }
        if(!this.rate.val || this.rate.val < 0){
            this.rate.isValid = false;
            this.formIsValid = false;
        }
        if(this.areas.val.length === 0)
        {
            this.areas.isValid = false;
            this.formIsValid = false;
        }

     },
     submitForm(){
        this.validateForm();
        if(!this.formIsValid)
        {
            return;
        }
        const formData = {
            first:this.firstName.val,
            last:this.lastName.val,
            desc:this.description.val,
            rate:this.rate.val,
            areas:this.areas.val
        };
        console.log(formData);

        this.$emit('save-data',formData);
     }
   }
}
</script>

<style scoped>
.form-control {
  margin: 0.5rem 0;
}

label {
  font-weight: bold;
  display: block;
  margin-bottom: 0.5rem;
}

input[type='checkbox'] + label {
  font-weight: normal;
  display: inline;
  margin: 0 0 0 0.5rem;
}

input,
textarea {
  display: block;
  width: 100%;
  border: 1px solid #ccc;
  font: inherit;
}

input:focus,
textarea:focus {
  background-color: #f0e6fd;
  outline: none;
  border-color: #3d008d;
}

input[type='checkbox'] {
  display: inline;
  width: auto;
  border: none;
}

input[type='checkbox']:focus {
  outline: #3d008d solid 1px;
}

h3 {
  margin: 0.5rem 0;
  font-size: 1rem;
}

.invalid label {
  color: red;
}

.invalid input,
.invalid textarea {
  border: 1px solid red;
}

</style>
